<template>
  <div class="ibox deptSort">
      <div class="ibox-title">
          <h5>部门归类</h5>
          <div class="ibox-tools">
              <a  class="dh"><i class="fa fa-chevron-up"  v-on:click="toggle"></i></a>
              
              <a ><i class="fa fa-times"></i></a>
          </div>
      </div>
      <div class="ibox-centent" v-show="isShow">
          <div class="row">
              <div class="search">    
                     <a class="btn" @click="saveModify"><i class="fa fa-floppy-o"></i>保存修改</a>    
                     <a class="btn" @click="showPreview"><i class="fa fa-plus"></i>预 览</a>    
              </div>
              <!-- fa fa-refresh -->
              <div class="tt">
                    <el-table :data="tableData" style="width: 100%">
                              <el-table-column type="index" label="序号" width="49">
                              </el-table-column>
                              <el-table-column property="deptid" label="PS部门id" min-width="100">

                              </el-table-column>
                              <el-table-column property="descr" label="部门全称" min-width="100">

                              </el-table-column>
                              <el-table-column property="descrshort" label="部门简称" min-width="160">

                              </el-table-column>
                              <el-table-column  label="部门分类" min-width="160">
                                <template scope="scope">
                                    <el-select v-model="scope.row.c_dept_type" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in deptList"
                                    :key="item.code"
                                    :label="item.code_name"
                                    :value="item.code">
                                    </el-option>
                                    </el-select>
                                </template>
                              </el-table-column>
                              <el-table-column property="dept_seq" label="排序号" min-width="80">

                              </el-table-column>
                              <!--<el-table-column property="" label="操作" width="620">
                                  <template scope="scope">
                                    <span class="opt-btn-sp">
                                    <a  @click='modifyRoleDialog(scope)'><i class="fa fa-key"></i>角色授权</a>
                                    <a title="编辑" @click='modifyDialog(scope)'><i class="fa fa-edit"></i>编辑</a>
                                  
                                    </span>   
                          
                                    <span class="delete" title="删除"><a @click="del(scope)"><i class="fa fa-remove"></i>删除</a></span>
                                  </template>
                              </el-table-column>-->

                        </el-table> 
              </div>
              
          </div>

        <!--<el-dialog :visible.sync="modifyShow" :title="title" >
            <div>
              <div class="title-modify">名称</div>
              <div>
                 <el-input v-model="editData.codeName" @keyup.enter.native="confirmModify" auto-complete="off"></el-input>
              </div>
              <div class="title-modify">学历项 (添加多项请；分开)</div>
              <div class="deg-contain" @click="focusInput">
                 <span v-for="(role,i) in editData.childs_edus">
                    <el-tag v-if="role.codeName" @close="handleClose(i)" closable type="success">{{role.codeName || null}}</el-tag>&nbsp
                 </span> 
                 <input ref="setTag" type="text" v-model="inputValue" @keyup.enter="confirmInput"  @keyup.delete="deleteTag" class="input"  />
              </div>
              <div class="title-modify">排序号</div>
              <div>
                 <el-input v-model="editData.code" @keyup.enter.native="confirmModify" auto-complete="off"></el-input>
              </div>
            </div>
     
            <div slot="footer" class="dialog-footer">
              <el-button @click="modifyShow = false">取 消</el-button>
              <el-button type="primary" @click="confirmModify">保 存</el-button>
            </div>

        </el-dialog>-->

        <el-dialog width="30%" :visible.sync="modifyRole"  title="部门预览">
            <i class="fa fa-search modal-icon"></i>
            <h4 class="modal-title">预览部门归类效果</h4>
            <el-select  v-model="selectDropValue" placeholder="请选择">
                <el-option-group
                v-for="group in showDropdpwnList"
                :key="group.code_name"
                :label="group.code_name">
                    <el-option
                        v-for="item in group.children"
                        :key="item.code_name"
                        :label="item.code_name"
                        :value="item.code_name">
                    </el-option>
                </el-option-group>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyRole = false">取 消</el-button>
                <!--<el-button type="primary" @click="saveRoleModify">保 存</el-button>-->
            </div>
        </el-dialog>

      </div>
  </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import {
  Select,
  Option,
  OptionGroup,
  Input,
  Table,
  TableColumn,
  Tag,
  Pagination,
  Dialog,
  MessageBox,
  Message,
  Tree,
} from "element-ui";

Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Tag);
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Tree);

// import cardLeader from "@/components/card-leader";
// import searchBox from "@/components/search-box";
// import adminUrl from "@/common/js/adminUrl";
// import CxoDialog from "@/components/userManager/dialog/CxoDialog";
// import BusinessDialog from "@/components/userManager/dialog/BusinessDialog";
// import DepartmentDialog from "@/components/userManager/dialog/DepartmentDialog";
// import HeadquartersDialog from "@/components/userManager/dialog/HeadquartersDialog";
// import RoleDialog from "@/components/userManager/dialog/RoleDialog";
export default {
  components: {
    // CxoDialog,
    // BusinessDialog,
    // DepartmentDialog,
    // HeadquartersDialog,
    // RoleDialog
  },
  data() {
    return {
      isShow: true,
      tableData: null,
      modifyShow:false,
      title:"学历集修改",
      deptList:[{
          code:'me',
          code_name:'爱'
      }],
      modifyRole:false,
      showDropdpwnList:null,
      selectDropValue:null
    
    };
  },
  mounted: function() {
    this.refresh();
    //绑定子页面需要的刷新模块方法
  },
  methods: {

    toggle: function() {
      this.isShow = !this.isShow;
    },

    refresh:function(){
      var self = this;
      // this.URL.getDepartmentOfClass.url
      this.Axios.Post(this.URL.getDepartmentOfClass.url).then(function(res) {
        self.tableData = res.data.datas.showList;
        self.deptList = res.data.datas.deptList;
        var arr = JSON.parse(JSON.stringify(self.deptList));
        self.deptList.unshift({
            code: "D", 
            code_name: "未设置"}
        );
        arr.unshift({
            code: "", 
            code_name: "全部"}
        );
        for (var i=0;i<self.tableData.length;i++) {
            for (var j=0;j<arr.length;j++) {
                if (self.tableData[i].c_dept_type === arr[j].code) {
                    if (arr[j].children) {
                        arr[j].children.push({'code_name':self.tableData[i].descrshort});
                    } else {
                        arr[j].children = [];
                        arr[j].children.push({'code_name':self.tableData[i].descrshort});
                    }
                    break;
                }
            }
        }
        console.log(arr,"showDropdpwnList");
        self.showDropdpwnList = arr;

      });
    },
    create:function(){
      this.title = "创建学历集";
      this.type = "create";
      this.editData = {
         childs_edus : [],
         codeName:null,
         code:null
      };
      this.modifyShow = true;
    },


    // del:function(scope){
    //     var self = this;
    //     var roleId = String(scope.row.id);
    
    //     // var name = scope.row.name;
    //     MessageBox.alert('此操作将永久删除该权限,是否继续', '是否删除 '+name, {
    //     confirmButtonText: '确定',
    //     cancelButtonText:"取消",
    //     callback: action => {
    //         if (action === "cancel") {
    //             return;
    //         }
    //         // self.URL.deleduStructureById.url
    //         self.Axios.Post(self.URL.deleduStructureById.url,{edu_id:roleId}).then(function(){
    //             self.refresh();
    //             Message({
    //                     message: '删除成功',
    //                     type: 'success'
    //             });
    //         })
    //         self.refresh();
    //     }
    //   })
    // },

    saveModify:function(){
        var self = this;
        this.Axios.Post(this.URL.saveChanges.url,{dataList:this.tableData}).then(function(res){
            Message({
                message: '修改成功',
                type: 'success'
            });        
            self.refresh();  
        })
        
        // this.Axios.Post('http://192.168.100.67:8080/department/saveChanges',{dataList:this.tableData}).then(function(res){
        //     Message({
        //         message: '修改成功',
        //         type: 'success'
        //     });
        //     self.refresh();        
        // })
    },
    showPreview:function(){
        this.modifyRole = true;
    }

  },

  beforeDestroy: function() {

  }
};
</script>

<style scoped>
.deptSort .dialog {
    background-color: #fff;
    padding: 100px;
}
.deptSort .modal-icon{
    font-size: 84px;
    color: #e2e3e3;
    display:inline-block;
}
.deptSort .modal-title {
    font-size: 26px;
    text-align:center;
}
.deptSort .modal-title {
    margin: 0;
    text-align:center;
    margin:20px;
    line-height: 1.42857143;
}
.deptSort .deg-contain{
   border:1px solid #8391a5;
   min-height:60px;
   border-radius: 6px;
}
.deptSort .content-right {
  float: right;
  margin-top: 17px;
}



/*content*/
.deptSort {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.deptSort .ibox-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.deptSort .ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}

.deptSort .ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}
.deptSort .ibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}
/*ibox-centent*/
.deptSort .ibox-centent {
  padding: 20px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.deptSort .row {
  margin-right: -10px;
  margin-left: -10px;
}
.deptSort .row .tt{
  padding:0 30px;
}

.deptSort .row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.deptSort .row .search .btn{
    
    width:90px;
    height:40px;
    line-height:40px;
    text-align:center;
    color:#fff;
    display:inline-block;
    background-color:#18a689;
    border-radius:5px;
}
.deptSort .row .search .btn>i{
    margin-right:3px;

}
.deptSort .row .search .btn:first-child{
    margin-left:20px;
}

.deptSort .row .search .btn:hover{
  background-color:#3c8dbc;
  color:#ddd;
  cursor:pointer;
}
.deptSort .row .search .wi {
  width: 33.3333333%;
}
.deptSort .el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
}
.deptSort .search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}
.deptSort .el-button .r {
  width: 66.66666667%;
}
.deptSort .el-input-group__append .el-button {
  background: #1ab394;
  color: #fff;
  border: 1px solid #1ab394;
}
/*table*/
.el-table__header-wrapper thead div {
  background-color: #fff;
  color: #1f2d3d;
}
.deptSort .btn-sp {
  padding-left: -10px;
}
.deptSort .btn-sp > a {
  border: 1px solid #23c6c8;
  background: #23c6c8;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.delete > a {
  border: 1px solid #ec4758;
  background: #ec4758;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.el-pagination {
  margin-top: 20px;
}
/*角色授权*/
.modal-content {
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: 0 none;
  position: relative;
}
.modal-header .close {
  margin-top: -2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: black;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: 0.2;
}
.deptSort .modal-title {.deptSort 
  margin: 0;
  line-height: 1.42857143;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 14px;
}
.modal-body {
  padding: 20px 30px 30px 30px;
  position: relative;
}
.el-dialog__body {
  color: #48576a;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
}
.input{
  border:none;
}
.input:focus{
  border:none;
  outline:none;
}
.title-modify{
  height:40px;
  line-height:40px;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.modal-footer {
  margin-top: 0;
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #ffffff;
  padding: 8px 13px;
  border-radius: 3px;
  border: 1px solid #1ab394;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
  padding: 8px 13px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}
/* .btn-default {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
} */
.glyphicon {
  position: relative;
  top: 3px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*图标*/
.glyphicon-off:before {
  content: "\e017";
}
</style>
<style>

.deptSort .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}
.deptSort .el-input-group--append .el-input__inner,
.deptSort .el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
}
.deptSort .el-input-group__append .el-button[data-v-4fefba28] {
  border: 1px solid #1ab394;
  border-radius: 0px 3px 3px 0px;
  line-height: 0.99;
}
/*table*/
.deptSort .el-table {
  border: none !important;
}
.deptSort .el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}
.deptSort .el-table__footer-wrapper thead div,
.deptSort .el-table__header-wrapper thead div {
  background: #fff !important;
  border-right:none;
}
.deptSort .el-table .cell {
  padding: 10px;
  cursor: pointer;
}
.deptSort .el-table .cell > div {
  text-align: center;
}
.deptSort .el-table__body-wrapper {
  overflow: visible !important;
}
.deptSort .el-table .cell,
.deptSort .el-table th > div {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.deptSort .ibox-tools dh {
  background: red;
  display: inline-block;
}
.deptSort .el-tag--success {
  margin-top: 3px;
}
/*.el-dialog__body {
  padding: 0px !important;
  color: #48576a;
  font-size: 14px;
}*/
/*.el-dialog__header {
  display: none;
}*/
.deptSort .btn-primary:hover,
.deptSort .btn-primary:focus {
  background-color: #18a689 !important;
}
.deptSort .btn-default:hover {
  background-color: #e6e6e6 !important;
  cursor: pointer;
  border: 1px solid #d2d2d2 !important;
}
.deptSort .el-form .el-form-item{
  width:80%;
}
.deptSort .el-form .el-select {
    width: 100%;
}
.deptSort .el-dialog__body{
  text-align:center;
  padding:10px 20px;
}
.deptSort .el-dialog{
  width:40%;
}
.deptSort .el-select{
  width:90%;
}
</style>
